<!-- eslint-disable -->
<template>
  <div>
    <div class="zc-cw-title">
      <div class="zt-left">
        <div class="zl-d0">
          <div class="zl-d0-d1">{{ appConfig.title }}</div>
          <div class="zt-right">
            <el-upload ref="upload" action :show-file-list="false" multiple :on-change="handleChange"
              :before-upload="handleBeforeUpload" :auto-upload="false" :limit="100" :on-exceed="handleExceed"
              :accept="appConfig.accept">
              <el-button type="primary" icon="el-icon-upload2" round>选择文件</el-button>
            </el-upload>
          </div>
        </div>
        <div class="zl-d1">{{ appConfig.brief }}</div>
      </div>

    </div>
    <div class="oss-upload">

      <div style="width: 100%;">
        <div slot="title" class="head-title">
          <span>文件列表</span>
          <span class="num">
            {{ fileList.length - unList.length }}/{{ fileList.length }}
          </span>
        </div>
        <div class="dialog-head">
          <div class="head-btn">
            <el-button size="small" type="primary" :disabled="uploadDisabled" icon="el-icon-video-play"
              @click="submitForm">
              开始上传
            </el-button>
            <el-button class="item-btn" size="small" :disabled="resumeDisabled" icon="el-icon-refresh-right"
              type="success" @click="resumeUpload">
              继续
            </el-button>
            <el-button class="item-btn" size="small" icon="el-icon-video-pause" type="danger" :disabled="pauseDisabled"
              @click="stopUplosd">
              暂停
            </el-button>
          </div>
        </div>
        <div class="file-list">
          <div class="file-item" v-for="(item, index) in fileList" :key="index">
            <!-- <svg class="icon-file" aria-hidden="true">
        <use :xlink:href="`#icon-${fileTypeIcon(item)}`"></use>
      </svg> -->
            <div class="file-name">
              <div class="name">
                <div>
                  <span class="file-name-item">
                    [{{ index + 1 }}]&nbsp;{{ item.name }}
                  </span>
                </div>
                <div>
                  <span class="speed" v-if="item.isLoading && !item.isPlay">
                    准备就绪
                  </span>
                  <span class="speed" v-if="item.isPlay && item.percentage !== 100">
                    {{ item.speed }}/s
                  </span>
                  <span v-if="item.percentage === 100 && item.isUploadSuccess" class="success">完成 </span>

                  <!-- <div class="total" v-if="item.tempCheckpoint">
            {{ filterSize(item.partSize) }}/{{ filterSize(item.size) }}
          </div> -->
                  <div class="total">
                    {{ filterSize(item.size) }}
                  </div>
                </div>

              </div>
              <span class="name error" v-if="item.errMsg">{{ item.errMsg }}</span>
              <el-progress :percentage="item.percentage" v-if="item.percentage < 100 && !item.errMsg"></el-progress>
              <template v-else>
                <el-progress :percentage="item.percentage"
                  :status="item.errMsg ? 'exception' : 'success'"></el-progress>
              </template>
            </div>
            <div class="tool">
              <span v-if="!item.percentage || (0 < item.percentage < 100 && !item.isPlay)
            " class="icon delete" @click="handleDeleteChangeFile(index)">
                <i class="el-icon-close"></i>
              </span>
              <span v-if="item.percentage && item.percentage !== 100" class="icon"
                :class="item.isPlay ? 'delete' : 'success'" @click="handleStopChangeFile(index, item)">
                <i :class="`el-icon-${item.isPlay ? 'video-pause' : 'caret-right'}`"></i>
                <!-- {{ item.isPlay ? '||' : '->' }} -->
              </span>
            </div>
          </div>
        </div>

      </div>
      <!-- <el-dialog :visible.sync="dialogVisible" destroy-on-close :close-on-click-modal="false" :before-close="handleClose">
</el-dialog> -->
    </div>
  </div>


</template>

<script>
import Mixin from './mixin'
export default {
  mixins: [Mixin],
}
</script>

<style lang="scss" scoped>
.zc-cw-title {
  width: 100%;
  display: flex;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid teal;
  font-size: 25px;

  .zt-left {
    flex-grow: 1;
  }

  .zl-d1 {
    font-size: 18px;
    color: gray;
    margin-top: 10px;
  }

  .zl-d0 {
    display: flex;
  }

  .zl-d0-d1 {
    flex-grow: 1;
  }

}

.file-list {
  overflow-y: auto;
  overflow-x: hidden;
}

.icon-file {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

::v-deep {
  .el-progress-circle {
    width: 40px !important;
    height: 40px !important;
  }
}

.file-item {
  display: flex;
  align-content: center;

  .file-name {
    flex: 1;

    .name {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .total {
        margin-left: 20px;
      }

      // justify-content: space-between;
      .file-name-item {
        font-weight: 500;
        //width: 290px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }

      .speed {
        width: 120px;
        text-align: center;
        font-size: 13px;
        color: $base-color-default;
      }

      .success {
        text-align: center;
        width: 120px;
        color: #91cc75;
      }

      &.error {
        color: #f45;
        font-size: 12px;
      }
    }
  }

  border-bottom: 1px solid #ddd;
  padding: 15px 0;

  &:last-child {
    border-bottom: 0;
  }

  .tool {
    margin-left: 15px;

    .icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      background-color: #eee;
      border-radius: 5px;
      margin: 0px 4px;
      cursor: pointer;
      font-size: 15px;
      color: rgb(255, 68, 85);
      font-weight: 600;

      &.success {
        color: #91cc75;
        background-color: #eee;
      }
    }
  }
}

.head-title {
  text-align: left;
  font-size: 18px;
  padding: 10px;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
}

::v-deep {
  .el-progress-bar {
    //width: 320px !important;
  }

  .el-progress {
    text-align: left;
  }
}

.num {
  background: #515256a8;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 5px;
  color: #fff;
}
</style>
